<template>
  <view class="container bg-color">
    <view :style="{height:getStatusHeight()+'px'}"></view>
    <view class="custom-nav-box" :style="{height:getCustomNavHeight()+'px'}">
      <view class="title" :style="{marginLeft:getLeftLogoPosInfo()+'px'}">
        {{title}}
      </view>
      <view class="search-box flex-center" @click="handlerGoSearch">
        <uni-icons type="search"></uni-icons>
        <text class="text">搜索</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    getCustomNavHeight,
    getStatusHeight,
    getLeftLogoPosInfo
  } from "@/utlis/system-info.js";

  // 事件回调
  function handlerGoSearch() {
    uni.navigateTo({
      url: '/subpkg/search/search'
    })
  }
  // 宏函数
  defineProps(['title']);
</script>

<style lang="scss" scoped>
  .container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;


    .custom-nav-box {
      padding-left: 10px;
      display: flex;
      align-items: center;


      .search-box {
        margin-left: 10px;
        height: 51rpx;
        width: 200rpx;
        background-color: #efefef;
        border-radius: 30px;

        .text {
          font-size: 13px;
          color: $text-color-second;
          margin-left: 5px;
        }
      }
    }
  }
</style>